<template>
	<view class="orderDetail">
		<view class="list" v-if="info">
			<view class="item dif">
				<view class="left">
					记录编号
					<text>{{info.recordcode}}</text>
				</view>
				<view v-if="info.flowStatus=='APPLIED'" class="right doing">
					<!-- doing  ok -->
					{{info.flowStatusName}}
				</view>
				<view v-else-if="info.flowStatus=='REJECTED'" class="right">
					<!-- doing  ok -->
					{{info.flowStatusName}}
				</view>
				<view v-else class="right ok">
					<!-- doing  ok -->
					{{info.flowStatusName}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					用户昵称
				</view>
				<view class="right">
					{{info.memberNickName}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					手机号
				</view>
				<view class="right">
					{{info.mobile}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					账号ID
				</view>
				<view class="right">
					{{info.memberNo}}
				</view>
			</view>
			
			<view class="item">
				<view class="left">
					原VIP类型
				</view>
				<view class="right">
					{{info.beforeCardTypeName}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					VIP类型
				</view>
				<view class="right" style="font-weight: 500;">
					{{info.afterCardTypeName}}
				</view>
			</view>
			
			<view class="item">
				<view class="left">
					开通金额
				</view>
				<view class="right red">
					¥{{info.totalAmount}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					抵扣金额
				</view>
				<view class="right red">
					¥{{info.discountAmount}}
				</view>
			</view>
			
			
			<view class="item" style="padding-bottom: 15rpx;">
				<view class="left">
					支付金额
				</view>
				<view class="right red" style="font-weight: 500;">
					¥{{info.payAmount}}
				</view>
			</view>
			
			<view class="item" style="padding-bottom: 15rpx;">
				<view class="left">
					订单备注
				</view>
				<view class="right red" style="font-weight: 500;">
					{{info.description}}
				</view>
			</view>
			
			
			
			
			<u-gap class="u-m-t-28 u-m-b-28" height="2" bg-color="#F5F5F5"></u-gap>
			<view class="item">
				<view class="left">
					提交时间
				</view>
				<view class="right">
					{{info.genTime}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					提交人
				</view>
				<view class="right">
					{{info.operatorName}}
				</view>
			</view>
			
			<view v-if="info.checkTime" class="item">
				<view class="left">
					审核时间
				</view>
				<view class="right">
					{{info.checkTime}}
				</view>
			</view>
			<view v-if="info.checkerName" class="item">
				<view class="left">
					审核人
				</view>
				<view class="right">
					{{info.checkerName }}
				</view>
			</view>
			<view v-if="info.note" class="left" style="padding-top: 16rpx;">
				审核备注
			</view>
			<view v-if="info.note" class="detai">
				{{info.note || ''}}
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:null
			}
		},
		methods:{
			
		},
		onLoad(e) {
			this.$u.api.vipOpenRecorddetail({
					id: e?.id
				})
				.then(res => {
					
					this.info = res?.data
					
				});
		}
	}
</script>
<style>
	page{
		background: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	.orderDetail{
		margin: 32rpx 40rpx;
		
		.list{
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 0 32rpx 32rpx;
			.detai{
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(15,20,23,0.6);
				line-height: 33rpx;
				padding: 8rpx 0 24rpx;
			}
			.left{
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 40rpx;
			}
			.item{
				padding: 24rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				
				.right{
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(15,20,23,0.6);
					line-height: 40rpx;
					&.red{
						color: #FA4A53 !important;
					}
				}
				&.dif{
					.left{
						font-weight: 500;
						text{
							margin-left: 8rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							line-height: 28rpx;
							color: rgba(15,20,23,0.6);
						}
					}
					.right{
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: bold;
						font-size: 28rpx;
						color: #6F7274;
						&.ok{
							color: #1BAB6B !important;
						}
						&.doing{
							color: #FFA340 !important;
						}
					}
				}
			}
			
			
		}
	}
	
</style>